<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 界面</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/register.css">
</head>

<body>
    <main id="wrap">
        <div class="sign-wrap">

            <div class="sign-wrap-inner">
                <div class="inner-left  sign-slider-box">
                    <ul>
                        <li class="logo">
                            <a href="./shouye.html">
                                <img src="./img/other/logo.png" alt="">
                                <div>
                                    <p>找工作</p>
                                    <p>上BOSS直聘直接谈</p>
                                </div>
                            </a>
                        </li>
                        <li class="goutong">
                            <i class="icon"></i>
                            <span>招聘</span>
                            <span>在线职位及时沟通</span>
                        </li>
                        <li class="choose">
                            <i class="icon"></i>
                            <span>任性选</span>
                            <span>各大行业职位任你选</span>
                        </li>
                        <li class="add">
                            <i class="icon"></i>
                            <span>人才匹配度高</span>
                            <span>获取更精准的牛人</span>
                        </li>
                    </ul>
                </div>
                <div class="inner-right sign-content">
                    <div class="inner-box">
                        <h3 class="title">BOSS直聘</h3>
                        <form action="#" method="post">

                            <div class="purpose-row">
                                <span class="cur" data-index="1">我要找工作</span>
                                <span data-index="2">我要招聘</span>
                            </div>
                            <div class="form-row row-select">
                                <span class="dropdown-select">
                                    <i class="icon-select-arrow"></i>
                                    <em class="text-select">+86</em>
                                    <input type="hidden" name="regionCode" id="" value="+86">
                                </span>
                                <span class="ipt-wrap">
                                    <i class="icon-sign-phone"></i>
                                    <input type="tel" class="ipt ipt-phone required" placeholder="手机号" name="phone">
                                </span>
                                <!-- 放置选择地址   渲染上去 -->
                                <div class="dropdown-menu">
                                    <ul>

                                    </ul>
                                </div>
                                <!-- <div class="tip-error"> 
                                    请填写手机号
                                </div> -->
                            </div>

                            <!-- 点击按钮进行验证 -->
                            <div class="form-row">
                                <div class="row-code">
                                    <div class="verify-init-btn">
                                        <span class="verify-init-dot"></span>
                                        点击按钮进行验证
                                    </div>
                                </div>
                            </div>
                            <div class="form-row">
                                <span class="ipt-wrap">
                                    <i class="icon-sign-sms"></i>
                                    <input type="text" class="ipt ipt-sms required" placeholder="短信验证码" name="phoneCode"
                                        maxlength="6">
                                    <input type="hidden" name="smsType" value="7">
                                    <button type="button" class="btn btn-sms">发送验证码</button>

                                </span>
                            </div>
                            <div class="form-btn">
                                <button type="submit" class="btn">登录/注册</button>
                            </div>
                            <div class="text-tip">
                                <div class="tip-error"></div>
                                <input type="checkbox" class="agree-policy" name="policy">
                                同意BOSS直聘
                                <a href="#">
                                    《用户协议》
                                </a>
                                <a href="#"> 《个人信息保护政策》</a>
                                <a href="javascript:;" class="link-signin">点击通过其它方式登录/注册</a>

                            </div>
                        </form>
                    </div>
                    <section class="inner-box1">
                        <h4>微信快速注册</h4>
                        <div class="qrcodeimg-box">
                            <img src="./img/other/43f257b283ae417a96a62b85ceebe47d.jpg" alt="">
                        </div>
                        <p class="sign-tip">
                            请用微信“扫一扫”扫描上方二维码
                            <br>
                            进入快捷注册
                        </p>
                        <div class="text-tip">
                            已有账号
                            <a href="javascript:;" class="link-signin">立即登录</a>
                        </div>
                    </section>
                    <!-- 点击切换到二维码登录部分 -->
                    <div class="btn-switch ewm-switch">
                        <div class="switch-tip">
                            微信极速注册
                            <i class="icon-triangle"></i>

                        </div>
                    </div>
                    <div class="publicity-info">
                        <p>客服电话 400-065-5799 工作时间：9:30-18:30</p>
                        <p>人力资源服务许可证|营业执照|朝阳区人社局监督电话</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
<script src="./jquery-3.6.0.js"></script>
<script>
    $('.add').hide()
    $('.inner-box1').hide()
    //  设定初始值为0
    var count = 0;
    $('.btn-switch').click(function () {
        count++;
        if (count % 2 == 0) {
            $('.inner-box>form').show()
            $('.inner-box1').hide()
            $('.btn-switch>.switch-tip').text('微信极速注册')
            $('.btn-switch').removeClass('phone-switch').addClass('ewm-switch')
        } else {
            $('.inner-box>form').hide()
            $('.inner-box1').show()
            $('.btn-switch>.switch-tip').text('手机号注册在这里')
            $('.btn-switch').removeClass('ewm-switch').addClass('phone-switch')
        }

    })


    //---------------点击切换找工作和招聘--------------------- 
    $('.purpose-row>span').click(function () {
        // 点击第一个找工作   第二个  招聘
        console.log($(this).attr('data-index'));
        // console.log($(this));
        if($(this).attr('data-index')==1){
            $(this).addClass('cur')
            $(this).next().removeClass('cur')
            $('.goutong>span').eq(0).text('沟通')
            $('.goutong>span').eq(1).text('在线职位及时沟通')
            $('.choose>span').eq(0).text('任性选')
            $('.choose>span').eq(1).text('各大行业职位任你选')
            $('.add').hide()


        }else if($(this).attr('data-index')==2){
            $(this).addClass('cur')
            $(this).prev().removeClass('cur')
            $('.goutong>span').eq(0).text('招聘效果好')
            $('.goutong>span').eq(1).text('与职场牛人在线开聊')
            $('.choose>span').eq(0).text('更多在线牛人')
            $('.choose>span').eq(1).text('入职速度快')

            $('.add').show()
        }
    })
</script>

</html>